<template>
	<div class="pageWrap" id="class">
		<div class="pageHeader">
			<h2 class="title">教学班级管理</h2>
			<div span="24" style="float:right;">
				<Button type="primary" ghost @click="addClass" class="md-add-jh">创建教学班级</Button>
				<Divider type="vertical" />
				<Checkbox v-model="createByMe" @on-change="changePage(1)">由我创建</Checkbox>
				<Select filterable v-model="queryClassInfo.type" placeholder="选择教学分类" @on-change="changePage(1)" style="width:150px;margin-left:15px" clearable>
					<Option value="1">实操模式</Option>
					<Option value="2">讲课模式</Option>
					<Option value="3">教学模式</Option>
				</Select>
				<Input v-model.trim="queryClassInfo.className" clearable placeholder="班级名称" style="width: 180px;margin-left:15px" @on-change="changePage(1)" />
				<Button class="header-btn" type="primary" ghost style="height: 32px;margin-left: 5px;" @click="refreshMyClassList()"><i class="el-icon-refresh-right" /></Button>
			</div>
		</div>
		<div class="content-wrap">
			<template v-if="!showDefImg">
				<card-list :data="classList" :columns="classCol" :page="queryClassInfo.pageIndex" :pageSize="queryClassInfo.pageSize"></card-list>
				<div class="bottom-page-wrap">
					<Page :total="totalCount" :current="queryClassInfo.pageIndex" :page-size="queryClassInfo.pageSize" show-elevator show-total @on-change="changePage"/>
				</div>
			</template>
			<no-data v-if="showDefImg" :text="showDefText"></no-data>
		</div>
		<Modal v-model="addClassModal.show" :title="addClassModal.title" :loading="addClassModal.loading" :mask-closable="false" @on-ok="saveClass" @on-cancel="resetField('formValidate')" width="500px">
			<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
				<FormItem label="名称" prop="className">
					<Input v-model.trim="formValidate.className" placeholder="请输入中文、数字、字母、下划线、-，班级名称长度为1-64个字符"></Input>
				</FormItem>
				<FormItem label="分类" prop="type">
					<Select filterable v-model="formValidate.type" placeholder="选择教学分类" :disabled="addClassModal.type == 2">
						<Option value="1">实操模式（学生操作）</Option>
						<Option value="2">讲课模式（学生看老师操作）</Option>
						<Option value="3">教学模式（实操和讲课都提供）</Option>
					</Select>
				</FormItem>
				<FormItem label="实验组" prop="teacher">
					<Select filterable v-model="formValidate.teacher" placeholder="选择实验组" @on-change="getGroupUsers" filterable :disabled="addClassModal.type == 2">
						<Option :value="JSON.stringify(group)" v-for="group in expGroupList" :key="group.id" :title="group.name">{{group.name}}</Option>
					</Select>
				</FormItem>
			</Form>
		</Modal>
		<Modal v-model="showUserModal" :title="curGroupName" footer-hide :width="1000">
			<Table border :columns="userCol" :data="userList"></Table>
		</Modal>
		<Drawer
            title="课程安排"
            v-model="scheduleDrawer"
            width="720"
            :mask-closable="false"
            :closable="false"
            id="setOverflowDraw"
        >
            <div style="position: absolute;top: 70px;left: -17px;cursor: pointer" @click="closeDistribution">
                <img src="../../../assets/globalIcon/closeIcon.png" alt="Close">
            </div>
        	<ClassCourseList :classInfo="curClass" v-if="scheduleDrawer"></ClassCourseList>
        </Drawer>
		<Drawer
            title="相关统计"
            v-model="statisticalDrawer"
            width="250"
            :closable="false"
            id="setStatisticalDraw"
        >	<List  border>
				<ListItem class="list1"><span>教学班排课总次数：</span><Tag color="green">{{statistical.count}}</Tag></ListItem>
				<ListItem class="list1"><span>排课课件总数：</span><Tag color="green">{{statistical.examCount}}</Tag></ListItem>
				<ListItem class="list1"><span>参与学员总数：</span><Tag color="green">{{statistical.studentCount}}</Tag></ListItem>
				<ListItem class="list1"><span>观看课件视频总人数：</span><Tag color="green">{{statistical.watchVideoPeopleCount}}</Tag></ListItem>
				<ListItem class="list1"><span>答题总数：</span><Tag color="green">{{statistical.studentAnswerCount}}</Tag></ListItem>
				<ListItem class="list1"><span>答题正确总数：</span><Tag color="green">{{statistical.studentRightAnswerCount}}</Tag></ListItem>
				<ListItem class="list1"><span>统计报告总人数：</span><Tag color="green">{{statistical.reportPeopleCount}}</Tag></ListItem>
				<ListItem class="list1"><span>报告审核总人数：</span><Tag color="green">{{statistical.reportCheckedPeopleCount}}</Tag></ListItem>
				<ListItem class="list1" v-for="(item,index) of statistical.reportCheckedLevelCount" :key="index"><span>报告审核等级{{levelType(index)}}：</span><Tag color="green">{{item}}</Tag></ListItem>
			</List>
           <div style="position: absolute;top: 70px;left: -17px;cursor: pointer" @click="closeStatistical">
                <img src="../../../assets/globalIcon/closeIcon.png" alt="Close">
            </div>
        </Drawer>
	</div>
</template>

<script>
	import encryption from '@/libs/encryption.js'
	import {
		debounce
	} from '@/libs/utils'
	//接口
	import {
		queryExperGroups,
		getExperGroupsUsers
	} from '@/api/users'
	import {
		addClass,
		queryClassList,
		modifyClass,
		delClass,
		updateClassStatus,getsSatisticClassById
	} from '@/api/selfStudy/class'
	import {
		addGroup,
		getGroupUsers,
		delGroup,
		getGroupInfo
	} from '@/api/boardcast_new.js'
	//组件
	import ClassCourseList from './classCourseList.vue'
	export default {
		name: 'myClass',
		components: {
			ClassCourseList
		},
		data() {
			const validateName = (rule, value, callback) => { //验证只能填入数字
				var reg = new RegExp("^[\u4E00-\u9FA5a-zA-Z0-9_ -]*$");
				//验证警戒值
				if(value) {
					if(!reg.test(value)) {
						callback(new Error('请输入中文、数字、字母、下划线、-'));
					} else {
						callback()
					}
				} else {
					callback()
				}
			}
			return {
				statistical:{},
				statisticalDrawer:false,
				showUserModal: false,
				userList: [],
				showExpList: false,
				showClassList: true,
				showUserList: false,
				showScheduleList: false,
				curCourse: {},
				formValidate: {
					className: '',
					egId: '',
					teacherId: '',
					teacherName: '',
					courseList: [],
					expDto: [],
					teacher: '',
					type: '',
					id: '',
					userIdlist: []
				},
				ruleValidate: {
					className: [{
						required: true,
						max: 64,
						message: '班级名称长度为1-64个字符',
						trigger: 'change'
					}, {
						validator: validateName,
						trigger: 'change'
					}],
					type: [{
						required: true,
						message: '类型不能为空',
						trigger: 'change'
					}],
					teacher: [{
						required: true,
						message: '实验组不能为空',
						trigger: 'change'
					}],
					// courseList:[
					// 	{ required: true, type: 'array', min: 1, message: 'Choose at least one course', trigger: 'change' }
					// ]
				},
				addClassModal: {
					show: false,
					title: '创建教学班级',
					loading: true,
					curPage: 1,
					curExpPage: 1,
					curSize: 10,
					curExpSize: 10,
					totalCount: 0,
					totalExpCount: 0,
					courseData: [],
					expData: [],
					type: 1 //1：创建 2：修改
				},
				curGroupName: '',
				classList: [],
				classCol: [{
						title: '班级名称',
						key: 'className',
						align: 'center',
						ellipsis: true,
						placement:'top-left'
					}, {
						// type:'expand',
						title: '实验组',
						key: 'egName',
						align: 'center',
						width:200,
						tooltip: true,
						render: (h, params) => {
							return h('a', {
								on: {
									'click': () => {
										this.getExperGroupsUsers(params.row);
									}
								}
							}, params.row.egName)
						}
					}, {
						title: '类型',
						key: 'type',
						width:200,
						render: (h, params) => {
							return h('span', this.$options.filters.typeFilter(params.row.type))
						}
					}, 
					{
						title: '创建者',
						key: 'teacherName',
						width:200,
						tooltip: true,
					},
					{
						title: '创建时间',
						key: 'createTime',
						width:150,
						tooltip: true,
					}, 
					{
						title: '',
						align: 'center',
						placement:'top-right',
						render: (h, params) => {
							return h('Tag', {
								props: {
									color:'purple'
								},
								style:{
									cursor:'pointer!important',
									display:params.row.hasChatGroup ? 'none' : ''
								},
								nativeOn: {
									click: () => {
										let queryData = JSON.stringify({
							        		id:params.row.egId,
							        		name:params.row.egName
							        	});
							        	this.getGroupUsers(queryData).then(data => {
							        		this.addGroup(params.row,true);
							        	}).catch(data => {
							        		this.$Message.error(data);
							        	})
									}
								}
							},'创建聊天组')
						}
					},
					{
						title: '',
						align: 'center',
						key:'course',
						placement:'top-right',
						render: (h, params) => {
							return h('Tag', {
								props: {
									color:'purple'
								},
								style:{
									cursor:'pointer!important'
								},
								nativeOn: {
									click: () => {
										this.getClassCourse(params.row);
									}
								}
							},'课程安排')
						}
					}, 
					{
						title: '',
						align: 'center',
						key:'statistics',
						placement:'top-right',
						render: (h, params) => {
							return h('Tag', {
								props: {
									color:'blue'
								},
								style:{
									cursor:'pointer!important'
								},
								nativeOn: {
									click: () => {
										this.getStatistical(params.row);
									}
								}
							},'相关统计')
						}
					},
					{
						title: '状态',
						key: 'status',
						align: 'center',
						placement:'top-right',
						render: (h, params) => {
							return h('RadioGroup', {
								props: {
									value: params.row.status,
									type: 'button',
									size: 'small'
								},
								on: {
									'on-change': (status) => {
										this.updateClassStatus(params.row.id, status)
									}
								}
							}, [
								h('Radio', {
									props: {
										label: '1', 
										disabled:  params.row.type == '1' || this.setReBtnStatus(params.row)
									}
								}, '讲课'),
								h('Radio', {
									props: {
										label: '0',
										disabled: params.row.type == '2' || this.setReBtnStatus(params.row)
									}
								}, '实操')
							])
						}
					},
					{
						title: '操作',
						action:true,
						placement: 'top-right',
						width: 280,
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'text',
										size: 'small',
										disabled:this.setReBtnStatus(params.row)
									},
									attrs:{
										title:'排课'
									},
									style: {
										padding: '0px',
										background: 'none',
										border: 'none',
										boxShadow: 'none'
									},
									on: {
										click: () => {
											this.curClass = params.row;
											this.$router.push({
												name:'teachSchedule',
												query:{
													id:params.row.id
												}
											})
											sessionStorage.setItem('queryObj',this.queryObj);
										}
									}
								}, [
									h('img', {
										attrs: {
											src: this.setReBtnStatus(params.row) ? require('../../../assets/globalIcon/calendar-d.png') : require('../../../assets/globalIcon/calendar-purple.png')
										}
									})
								]),
								h('Button', {
									props: {
										type: 'text',
										size: 'small',
										disabled:this.setReBtnStatus(params.row),
									},
									attrs:{
										title:'修改'
									},
									style: {
										padding: '0px',
										background: 'none',
										border: 'none',
										boxShadow: 'none',
										marginLeft:'20px'
									},
									on: {
										click: () => {
											this.addClassModal.type = 2;
											this.addClassModal.show = true;
											this.addClassModal.title = '修改我的教学班级';
											this.getClassInfo(params.row);
										}
									}
								}, [
									h('img', {
										attrs: {
											src: this.setReBtnStatus(params.row) ? require('../../../assets/project/modifys.png') : require('../../../assets/project/modifys-h.png')
										}
									})
								]),
								h('Poptip', {
									props: {
										confirm: true,
										'ok-text': "确定",
										'cancel-text': "取消",
										type: 'error',
										size: 'large',
										title: '你确定要删除吗?',
										transfer: true
									},
									attrs:{
										title:'删除'
									},
									style: {
										marginLeft: '20px'
									},
									on: {
										'on-ok': () => {
											this.deleteClass(params.row)
										}
									}
								}, [
									h('Button', {
										props: {
											type: 'text',
											size: 'small',
											disabled:this.setReBtnStatus(params.row)
										},
										style: {
											padding: '0px',
											background: 'none',
											border: 'none',
											boxShadow: 'none'
										},
									}, [
										h('img', {
											attrs: {
												src: this.setReBtnStatus(params.row) ? require('../../../assets/project/delNote-d.png') : require('../../../assets/project/delNote-h.png')
											}
										})
									])
								])
							])
						}
					},
				],
				userCol: [{
					type: 'index',
					width: 60,
					align: 'center'
				}, {
					title: '昵称',
					key: 'nickname',
					align: 'center'
				}, {
					title: '用户名',
					key: 'username',
					align: 'center'
				}, {
					title: '邮箱',
					key: 'email',
					align: 'center'
				}, {
					title: '是否在线',
					key: 'online',
					align: 'center',
					render: (h, params) => {
						return h('span', params.row.online ? '是' : '否')
					}
				}, {
					title: '创建者',
					key: 'creatorName',
					align: 'center'
				}, {
					title: '描述',
					key: 'description',
					align: 'center'
				}, {
					title: '创建时间',
					key: 'created',
					width: 150,
					align: 'center',
					sortable: true,
				}],
				totalCount: 2,
				expGroupList: [],
				expGroupUsersList: [],
				createByMe: false,
				queryClassInfo: {
					pageIndex: 1,
					pageSize: 10,
					teacherId: '',
					// egId:'',
					// className:'TEST',
					// type:'',
					// teacherName:''
				},
				USER_ID: '',
				USER_NAME: '',
				curClassId: '',
				showDefImg: true,
				showDefText: "加载中",
				scheduleDrawer:false
			}
		},
		mounted() {
			//初始化数据
			let September = sessionStorage.getItem('November')
			September = JSON.parse(encryption.SelfUseDecrypt(September))
			this.USER_ID = September.userId;
			this.USER_NAME = September.nickname;
			//赋值查询条件
			let queryObj = sessionStorage.getItem('queryObj');
			if(queryObj) {
				let params = JSON.parse(queryObj);
				this.createByMe = params.teacherId == this.USER_ID;
				this.queryClassInfo = params;
				sessionStorage.removeItem("queryObj");
			}
			//计算pageSize并查询班级数据
			this.setStyle()
			window.onresize = () => {
					this.setStyle()
				}
				//查询实验组
			this.getExpGroupList();
		},
		beforeDestroy() {
			window.onresize = null;
		},
		filters: {
			typeFilter(val) {
				let str = '';
				switch(val) {
					case '1':
						str = '实操模式';
						break;
					case '2':
						str = '讲课模式';
						break;
					case '3':
						str = '教学模式';
						break;
				}
				return str;
			}
		},
		methods: {
			levelType(index){
				if(index==0){
					return '未学'
				} else if(index==1){
					return '差'
				}else if(index==2){
					return '良'
				}else {
					return '优'
				}

			},
			setStyle: debounce(function() {
				window.fullHeight = document.documentElement.clientHeight;
				window.fullWidth = document.documentElement.clientWidth;
				this.fullHeight = window.fullHeight;
				this.fullWidth = window.fullWidth;
				this.setTableHei = this.fullHeight - 197
				this.queryClassInfo.pageSize = Math.floor(this.setTableHei / 96)
				if(this.totalCount > this.queryClassInfo.pageSize) {
					let maxPage = Math.ceil(this.totalCount / this.queryClassInfo.pageSize);
					if(maxPage < this.queryClassInfo.pageIndex) {
						this.queryClassInfo.pageIndex = maxPage;
					}
				}
				this.queryClassList();
			}, 500),
			initShowData() {
				this.showClassList = false;
				this.showExpList = false;
				this.showUserList = false;
				this.showScheduleList = false;
			},
			//添加班级按钮调用
			addClass() {
				this.addClassModal.show = true;
				this.formValidate.id = '';
				this.addClassModal.type = 1;
			},
			//排课
			gotoTeachSchedule() {
				this.$router.push({
					name: 'teachSchedule'
				})
				sessionStorage.setItem('curClassPage', this.queryClassInfo.pageIndex);
			},
			//查询班级列表
			queryClassList:debounce(function() {
				if(this.createByMe) {
					this.queryClassInfo.teacherId = this.USER_ID;
				} else {
					this.queryClassInfo.teacherId = ''
				}
				this.queryObj = JSON.stringify(this.queryClassInfo);
				queryClassList(this.queryClassInfo).then(data => {
					if(data.code == 1) {
						let classList = data.attribute.dataList;
						this.totalCount = data.attribute.total;
						//查询聊天组是否创建成功
						let pArr = classList.map(async item => {
							try {
								await getGroupInfo(item.id).then(res => {
									if(res.code && res.data.data) {
										item.hasChatGroup = true;
									} else {
										item.hasChatGroup = false;
									}
								}).catch(error => {
									item.hasChatGroup = true;
								})
							} catch(err) {
								item.hasChatGroup = true;
								console.log(err);
							}
							return item;
						})
						Promise.all(pArr).then(data => {
							this.classList = classList;
							if(this.classList.length <= 0) {
								this.showDefImg = true;
								this.showDefText = "暂无信息"
							} else {
								this.showDefImg = false;
							}
						})
					} else {
						this.classList = [];
						this.showDefImg = true;
						this.showDefText = "暂无信息"
						this.$Message.warning(data.message);
					}
				})
			},500),
			//查询班级列表详情
			getClassInfo(classInfo) {
				let formValidate = JSON.parse(JSON.stringify(classInfo));
				formValidate.teacher = JSON.stringify(this.expGroupList.filter(group => {
					return formValidate.egId == group.id
				})[0]);
				this.formValidate = formValidate;
				this.getGroupUsers(formValidate.teacher);
			},
			//删除班级列表
			deleteClass(classInfo) {
				delClass(classInfo.id).then(data => {
					if(data.code == 1) {
						this.$Message.info('操作成功')
						this.queryClassList();
						//if(classInfo.hasChatGroup) {
							//删除聊天组
							//this.delGroup(classInfo.id);
						//}
					} else {
						this.$Message.warning(data.message)
					}
				}).catch((error) => {
					console.log(error);
				})
			},
			//保存班级
			saveClass() {
				this.$refs['formValidate'].validate((valid) => {
					if(valid) {
						if(!this.formValidate.id) {
							let params = JSON.parse(JSON.stringify(this.formValidate));
							delete params.teacher
							addClass(params).then(data => {
								this.cancelLoading('addClassModal');
								if(data.code == 1) {
									this.resetField('formValidate');
									this.addClassModal.show = false;
									this.refreshMyClassList(); //清空所有查询条件，回到第一页
									this.$Message.info('操作成功')
									//添加自定义群组
									this.addGroup(data.attribute.items);
								} else {
									this.$Message.warning(data.message)
								}
							}).catch(error => {
								this.cancelLoading('addClassModal');
							})
						} else {
							let params = JSON.parse(JSON.stringify(this.formValidate));
							delete params.teacher
							modifyClass(params.id, params).then(data => {
								this.cancelLoading('addClassModal');
								if(data.code == 1) {
									this.resetField('formValidate');
									this.addClassModal.show = false;
									this.queryClassList();
									this.$Message.info('操作成功');
								} else {
									this.$Message.warning(data.message)
								}
							}).catch(error => {
								this.cancelLoading('addClassModal');
							})
						}
					} else {
						this.cancelLoading('addClassModal');
					}
				})
			},
			changePage(page) {
				this.queryClassInfo.pageIndex = page;
				this.queryClassList();
			},
			//隐藏modal
			hideModal(name) {
				this[name].show = false;
			},
			//取消按钮loading
			cancelLoading(name) {
				this[name].loading = false;
				setTimeout(() => {
					this[name].loading = true;
				})
			},
			//重置表单
			resetField(name) {
				this.$refs[name].resetFields();
				if(name == 'formValidate') {
					this.addClassModal = {
						show: false,
						title: '创建教学班级',
						loading: true,
						curPage: 1,
						curExpPage: 1,
						curSize: 10,
						curExpSize: 10,
						totalCount: 0,
						totalExpCount: 0,
						courseData: [],
						expData: []
					}
					this.formValidate = {
						className: '',
						egId: '',
						teacherId: '',
						teacherName: '',
						courseList: [],
						expDto: [],
						teacher: '',
						type: '',
						id: '',
						userIdlist: []
					}
				}
			},
			//查询实验组
			getExpGroupList() {
				let params = {
					visibility: 'all',
					order: 'desc',
					sortBy: 'created',
					pageIndex: 1,
					pageSize: 2147483646
				}
				queryExperGroups(params).then(data => {
					if(data.code == 1) {
						this.expGroupList = data.data.items.filter(item => item.userCount > 0);
					} else {
						this.$Message.warning(data.message)
					}
				})
			},
			//查询实验组成员--change实验组时调用
			getGroupUsers(group) {
				return new Promise((resolve, reject) => {
					if(!group) {
						return
					}
					let teacher = JSON.parse(group);
					this.formValidate.egId = teacher.id;
					this.formValidate.egName = teacher.name;
					this.formValidate.teacherId = this.USER_ID;
					this.formValidate.teacherName = this.USER_NAME;
					getExperGroupsUsers(teacher.id).then(data => {
						if(data.code == 1) {
							this.expGroupUsersList = data.data;
							this.formValidate.userIdlist = data.data.map(user => user.userId);
							resolve(1);
						} else {
							this.$Message.warning(data.message)
							reject(data.message);
						}
					}).catch(error => {
						console.log(error);
						reject(data.message);
					})
				})
			},
			//更新班级状态
			updateClassStatus(classId, status) {
				updateClassStatus(classId, status).then(data => {
					if(data.code == 1) {
						this.queryClassList();
						this.$Message.info('操作成功')
					} else {
						this.$Message.warning(data.message)
					}
				})
			},
			//查询实验组成员--点击实验组名称调用
			getExperGroupsUsers(params) {
				this.showUserModal = true;
				this.curGroupName = params.egName;
				getExperGroupsUsers(params.egId).then(data => {
					if(data.code == 1) {
						this.userList = data.data.map(user => user.user);
					} else {
						this.$Message.warning(data.message)
					}
				})
			},
			//刷新按钮调用
			refreshMyClassList() {
				this.queryClassInfo.pageIndex = 1;
				this.queryClassInfo.className = '';
				this.queryClassInfo.type = '';
				this.queryClassInfo.teacherId = this.USER_ID;
				this.createByMe = false;
				this.queryClassList();
			},
			//添加聊天组
			addGroup(groupInfo, needShowTip) {
				let groupUsers = this.expGroupUsersList.map(user => {
					return {
						"avatar": "",
						"userId": user.user.id,
						"userName": user.user.nickname
					}
				})
				groupUsers.push({
					"avatar": "",
					"userId": groupInfo.teacherId,
					"userName": groupInfo.teacherName
				})
				let params = {
					avatar: '',
					id: groupInfo.id,
					name: groupInfo.className,
					groupUsers: groupUsers
				}
				addGroup(params).then(data => {
					if(data.code == 1) {
						if(needShowTip) {
							this.$Message.info('聊天组创建成功');
							groupInfo.hasChatGroup = true;
						}
					} else {
						this.$Message.error(data.message)
					}
				}).catch(error => {
					console.log(error);
				})
			},
			//删除聊天组
			delGroup(groupId) {
				delGroup(groupId).then(data => {
					if(data.code == 1) {

					} else {
						this.$Message.warning(data.message)
					}
				}).catch(error => {
					console.log(error);
				})
			},
			setReBtnStatus(params) {
				let userid = params.teacherId;
				if(userid === this.USER_ID) { //|| this.isRootDesinger
					return false
				} else {
					return true
				}
			},
			getStatistical(row){
				this.statisticalDrawer = true;
				getsSatisticClassById(row.id).then(res=>{
					if(res.code==1){
						this.statistical=res.data
					}else{
						this.$Message.warning(res.message)
					}
				})
			},
			getClassCourse(item){
	        	this.scheduleDrawer = true;
	        	sessionStorage.setItem('queryObj',this.queryObj);
	        	this.curClass = item;
	        },
			closeStatistical(){
	        	this.statisticalDrawer = false;
	        },
	        closeDistribution(){
	        	this.scheduleDrawer = false;
	        	sessionStorage.removeItem('queryObj');
	        },
		}
	}
</script>
<style scoped>
	.list1{
		display: flex;
		justify-content: flex-end;
	}
	.pageWrap {
		margin: 30px;
		background: #fff;
		height: calc(100vh - 60px);
		border-radius: 10px;
	}
	
	.pageHeader {
		display: flex;
		justify-content: space-between;
		padding: 20px 20px 0 20px;
	}
	
	.pageHeader .title {
		float: left;
		font-size: 18px;
	}
	
	.fixedHeightTable {
		margin: 20px 20px 0 20px;
	}
	
	.content-wrap {
		height: calc(100% - 52px);
		padding:20px 20px 0px;
	}
	
	.bottom-page-wrap {
		display: flex;
		justify-content: center;
		margin: 15px 0px;
	}
	/deep/#setOverflowDraw .ivu-drawer-body{
		overflow: inherit;
	}
	/deep/#setStatisticalDraw .ivu-drawer-body{
		overflow: inherit;
	}
</style>